<template>
	<div>
		<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">订单详细</router-link>
			</div>
		</div>
		<div class="roder-details">
				<div class="info">
					<a href="" class="dc" style="cursor: pointer;">导出</a>
					<h3 class="title">订单基础信息</h3>
					<div class="list">
						<div class="list-div">
							<div>
								<p>订单编号</p>
								<span>33643QXA0034</span>
							</div>
							<div>
								<p>门店编号</p>
								<span>3364AA4</span>
							</div>
							<div>
								<p>创建时间</p>
								<span>2020-06-01 10:36</span>
							</div>
		
							<div>
								<p>订单金额</p>
								<span>3600元</span>
							</div>
							<div>
								<p>公司名称</p>
								<span>文康科技</span>
							</div>
							<div>
								<p>面料来源</p>
								<span>厂家面料</span>
							</div>
							<div>
								<p>订单名称</p>
								<span>定制POLO</span>
							</div>
							<div>
								<p>面料来源</p>
								<span>正常业务</span>
							</div>
							<div>
								<p>快递方式</p>
								<span>顺丰（慢）</span>
							</div>
							<div>
								<p>包装方式</p>
								<span>扁平箱</span>
							</div>
							<div style="width: 50%">
								<p>地址</p>
								<span>宁波市鄞州区光华路三方大厦</span>
							</div>
						</div>
					</div>
					<div class="list">
						<div class="list-div">
							<div>
								<p>订单备注</p>
								<span>客户有要求</span>
							</div>
						</div>
					</div>
					
					
					<h3 class="title">部门列表</h3>
					<div class="list"  style="margin-bottom: 20px;">
						<div class="list-div">
							<div>
								<p>部门名称</p>
								<span>文康1</span>
							</div>
							<div>
								<p>收货人</p>
								<span>高温说</span>
							</div>
							<div>
								<p>联系电话</p>
								<span>18366591541</span>
							</div>
		
							<div style="width: 100%">
								<p>收货地址</p>
								<span>宁波市鄞州区聚贤路与光华路交叉口三方大厦</span>
							</div>
						</div>
					</div>
					<div class="table-css" style="margin-bottom: 20px;">
						<a-table class="table1" lign="center" :columns="columns3" :data-source="data2" :pagination="false">
							<p slot="k5" slot-scope="text">
								<span v-if="text != '1'">{{text}}</span>
								<span v-else style="color:#C49D18">定制款(查看详细)</span>
							</p>
							<p slot="k6" slot-scope="text">
								<span v-if="text != '1'">{{text}}</span>
								<span v-else style="color:#C49D18">定制款(查看详细)</span>
							</p>
							<p slot="k7" slot-scope="text">
								<span v-if="text != '1'">{{text}}</span>
								<span v-else style="color:#C49D18">定制款(查看详细)</span>
							</p>
						</a-table>
					</div>
					
					<div class="list" style="margin-bottom: 20px;">
						<div class="list-div">
							<div>
								<p>部门名称</p>
								<span>文康2</span>
							</div>
							<div>
								<p>收货人</p>
								<span>高温说</span>
							</div>
							<div>
								<p>联系电话</p>
								<span>18366591541</span>
							</div>
					
							<div style="width: 100%">
								<p>收货地址</p>
								<span>宁波市鄞州区聚贤路与光华路交叉口三方大厦</span>
							</div>
						</div>
					</div>
					
					<div class="table-css" style="margin-bottom: 20px;">
						<a-table class="table1" lign="center" :columns="columns3" :data-source="data2" :pagination="false">
							<p slot="k5" slot-scope="text">
								<span v-if="text != '1'">{{text}}</span>
								<span v-else style="color:#C49D18">定制款(查看详细)</span>
							</p>
							<p slot="k6" slot-scope="text">
								<span v-if="text != '1'">{{text}}</span>
								<span v-else style="color:#C49D18">定制款(查看详细)</span>
							</p>
							<p slot="k7" slot-scope="text">
								<span v-if="text != '1'">{{text}}</span>
								<span v-else style="color:#C49D18">定制款(查看详细)</span>
							</p>
						</a-table>
					</div>
					
					<h3 class="title">员工列表</h3>
					<h4 class="title2" style="font-size: 16px;font-weight: 700;">文康1</h4>
					<div class="table-css" style="margin-bottom: 20px;">
						<a-table class="table1" lign="center" :columns="columns4" :data-source="data3" :pagination="false">
							<p slot="k6" slot-scope="text">
								<span v-if="text == '2'" style="color:#C49D18">套号量体</span>
								<span v-else style="color:#C8442A">自定义尺码</span>
							</p>
							<p slot="k7" slot-scope="text">
								<span v-if="text == '2'" style="color:#C49D18">袖长-2cm</span>
								<span v-else style="color:#C8442A" >查看详情</span>
							</p>
						</a-table>
					</div>
					<h4 class="title2" style="font-size: 16px;font-weight: 700;">文康2</h4>
					<div class="table-css" style="margin-bottom: 20px;">
						<a-table class="table1" lign="center" :columns="columns4" :data-source="data3" :pagination="false">
							<p slot="k6" slot-scope="text">
								<span v-if="text == '2'" style="color:#C49D18">套号量体</span>
								<span v-else style="color:#C8442A">自定义尺码</span>
							</p>
							<p slot="k7" slot-scope="text">
								<span v-if="text == '2'" style="color:#C49D18">袖长-2cm</span>
								<span v-else style="color:#C8442A" >查看详情</span>
							</p>
						</a-table>
					</div>
		
					<h3 class="title">订单附加条件</h3>
					<div class="tabs">
						<div class="tab">
							<h5>式样</h5>
							<div class="tab-content" >
								<p v-for="item in tab1Data" :key="item.id"  :class="{'active':tab1Idx == item.id}">{{item.name}}</p>
							</div>
						</div>
						<div class="tab">
							<h5>紧急指数</h5>
							<div class="tab-content">
								<p style="width:160px" v-for="item in tab2Data" :key="item.id"  :class="{'active':tab2Idx == item.id}"><span>{{item.name}}</span><b>{{item.hoveName}}</b></p>
							</div>
						</div>
						<div class="tab">
							<h5>改款打样</h5>
							<div class="tab-content">
								<p v-for="item in tab3Data" :key="item.id"  :class="{'active':tab3Idx == item.id}">{{item.name}}</p>
							</div>
						</div>
						<div class="tab">
							<h5>品牌标</h5>
							<div class="tab-content">
								<p v-for="item in tab4Data" :key="item.id" :class="{'active':tab4Idx == item.id}">{{item.name}}</p>
							</div>
						</div>
						<div class="tab">
							<h5>订单备注</h5>
							<div class="tab-content">
								<p v-for="item in tab5Data" :key="item.id" :class="{'active':tab5Idx == item.id}">{{item.name}}</p>
							</div>
						</div>
					</div>
		
		
					<h3 class="title">订单费用明细</h3>
					<h4 class="title2">面料费用</h4>
					<div class="table-css">
						<a-table class="table1" lign="center" :columns="columns1" :data-source="data1" :pagination="false">
							<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
							<a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
							<a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>
						</a-table>
					</div>
					<h5 class="price1">面料费用小计：<span>22800元</span></h5>
					<h4 class="title2">加工费用</h4>
					<div>
						<div class="table-css">
							<a-table class="table1" lign="center" :columns="columns2" :data-source="data1" :pagination="false">
								<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
								<a slot="k6" slot-scope="text" style="color:#C49D18">{{text}}</a>
								<a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>
							</a-table>
						</div>
					</div>
					<h5 class="price1">面料费用小计：<span>22800元</span></h5>
					
					
					<h4 class="title2">现货费用</h4>
					<div>
						<div class="table-css">
							<a-table class="table1" lign="center" :columns="columns5" :data-source="data1" :pagination="false">
								<a slot="k7" slot-scope="text" style="color:#C49D18">{{text}}</a>
								<a slot="k9" slot-scope="text" style="color:#C49D18">{{text}}</a>
								<a slot="k8" slot-scope="text" style="color:#C49D18">{{text}}</a>
							</a-table>
						</div>
					</div>
					<h5 class="price1">面料费用小计：<span>22800元</span></h5>
					
					
					<div class="btns">
						<h5 class="price">合计金额：<span>10640元</span></h5>
						<div>
							<a href="" class="b1">立即下单</a>
							<a href=""  class="b2">导出</a>
							<a href=""  class="b3">返回</a>
						</div>
					</div>
		
				</div>
			</div>
		
	</div>
</template>

<script>
	
	const columns1 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '面料',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '米数',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '标准单价',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '阶梯折扣',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '客户折扣',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '折后单价',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '总金额',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];
	
	const columns5 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '产品名称',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '产品货号',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '件数',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '标准单价',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '阶梯折扣',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '客户折扣',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '折后单价',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
		{
			title: '总金额',
			key: 'k9',
			dataIndex: 'k9',
			scopedSlots: {
				customRender: 'k9'
			},
		},
	];
	
	const columns3 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '产品货号',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '产品名称',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '产品数量',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '绣字',
			key: 'k5',
			dataIndex: 'k5',
			scopedSlots: {
				customRender: 'k5'
			},
		},
		{
			title: '撞色',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '自定义参数',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		}
	];
	
	const columns4 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '员工姓名',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '性别',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '员工编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品名称',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '尺码',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '量体数据',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		}
	];
	
	const columns2 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '品类',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '性别',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '标准单价',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '阶梯折扣',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '客户折扣',
			key: 'k6',
			dataIndex: 'k6',
			scopedSlots: {
				customRender: 'k6'
			},
		},
		{
			title: '折后单价',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '总金额',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];
	const data1 = [{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '80%',
		k7: '304元/米',
		k8: '7600元',
		k9: '1520元'
	}]
	const data2 = [{
		k1: '1',
		k2: 'GYS001',
		k3: '西服-上衣',
		k4: '12',
		k5: '右袖口/LOGO',
		k6: '无',
		k7: '无'
	},
	{
		k1: '2',
		k2: 'GYS001',
		k3: '西服-上衣',
		k4: '12',
		k5: '1',
		k6: '1',
		k7: '1'
	}]
	const data3 = [{
		k1: '1',
		k2: '支彬',
		k3: '男',
		k4: '13616570547',
		k5: '男-西服上衣',
		k6: '2',
		k7: '2'
	},
	{
		k1: '2',
		k2: 'GYS001',
		k3: '男',
		k4: '15168560965',
		k5: '男-西服上衣',
		k6: '1',
		k7: '1'
	}]
	// @ is an alias to /src
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	export default {
		name: 'MyAfterSales',
		data() {
			return {
				columns1,
				columns2,
				columns3,
				columns4,
				columns5,
				data3,
				data1,
				data2,
				locale,
				tab1Data: [
					{
						id: 1,
						name: '无需试穿'
					}
				],
				tab1Idx: -1,
				tab2Data: [
					{
						id: 1,
						name: '常规',
						hoveName: '7个工作日'
					}
				],
				tab2Idx: -1,
				tab3Data: [
					{
						id: 1,
						name: '来款/样式'
					},
				],
				tab3Idx: -1,
				tab4Data: [
					{
						id: 1,
						name: '派定制'
					},
				],
				tab4Idx: -1,
				tab5Data: [
					{
						id: 1,
						name: '备注信息'
					},
				],
				tab5Idx: -1,
			}
		},
		methods: {
			selectTab: function (dataStr, i)  {
				this[dataStr] = i
			}
		}
	}
</script>

<style scoped lang="scss">
	.roder-details {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 20px 35px;
		
		.btns {
			display: flex;
			justify-content: space-between;
			height: 36px;
			align-items: center;
			margin-bottom: 50px;
			div {
				display: flex;
			}
			a {
				margin-left: 20px;
			}
			a.b1 {
				background-color: #393939;
				width: 122px;
				height: 36px;
				color: rgb(255, 238, 58);
				font-size: 15px;
				line-height: 36px;
				text-align: center;
				display: block;
			}
			a.b2 {
				background-color: #393939;
				width: 90px;
				height: 36px;
				color: #fff;
				font-size: 15px;
				line-height: 36px;
				text-align: center;
				display: block;
			}
			a.b3 {
				background-color: rgba(242, 242, 242, 1);
				width: 90px;
				height: 36px;
				color: #444;
				font-size: 15px;
				line-height: 36px;
				text-align: center;
				display: block;
			}
		}
		
		
		.dc {
			    position: absolute;
				right: 20px;
				top: 15px;
				z-index: 11;
			        width: 95px;
			        height: 38px;
			        display: flex;
			        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
			        font-weight: 500;
			        font-style: normal;
			        align-items: center;
			        justify-content: center;
					background-image: url(../../assets/u9117.svg);
					font-size: 13px;
					color: #333;
				
		}
		
		.info {
			position: relative;
			padding-left: 30px;
			.table-css {
				position: relative;
				.bz {
					    width: 447px;
					    height: 63px;
					    background: inherit;
					    background-color: rgba(255, 221, 202, 1);
						position: absolute;
						right: 0px;
						top: -63px;
						display: flex;
						align-items: center;
						justify-content: center;
						    align-items: center;
						    justify-content: center;
						    flex-wrap: wrap;
						    flex-direction: column;
						p {
							width: 100%;
							color: rgb(251, 8, 8);
							font-size: 13px;
							padding-left: 10px;
							margin-bottom: 0px;
							line-height: 16px;
						}
				}
			}
			.btn {
					
				    border-width: 0px;
				    width: 112px;
				    height: 40px;
				    background: inherit;
				    background-color: rgba(13, 221, 108, 1);
				    border: none;
				    border-radius: 3px;
				    -moz-box-shadow: none;
				    -webkit-box-shadow: none;
				    box-shadow: none;
				    font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
				    font-weight: 500;
				    font-style: normal;
				    font-size: 15px;
					text-align: center;
					display: block;
					color: #fff;
					line-height: 40px;
					margin-top: 25px;
					margin-bottom: 60px;
					cursor: pointer;
			}
			.price {
				color: rgb(38, 38, 38);
				font-size: 16px;
			    padding: 2px 2px 2px 24px;
				font-weight: 700;
				span {
					color: rgb(215, 1, 1);
				}
				margin: 35px 0px;
			}
			.price1 {
				color: rgb(38, 38, 38);
				font-size: 16px;
				font-weight: 400;
				    padding: 2px 2px 2px 24px;
				span {
					color: rgb(215, 1, 1);
				}
				margin: 35px 0px;
			}
			.text1 {
				    width: 533px;
				    height: 105px;
				    padding: 3px 2px 3px 2px;
				    font-family: 'ArialMT', 'Arial';
				    font-weight: 400;
				    font-style: normal;
				    font-size: 13px;
				    text-decoration: none;
				    letter-spacing: normal;
				    color: #000000;
				    vertical-align: none;
				    text-align: left;
				    text-transform: none;
				    background-color: #f9f9f9;
				    border-color: transparent;
				    resize: none;
					outline: none;
					padding: 10px;
			}
			.tabs{
				.tab {
					margin-bottom: 10px;
					display: flex;
					h5 {
						width: 112px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						height: 36px;
						align-items: center;
						margin: 0px !important;
						margin-right:  6px !important;
					}
					.tab-content {
						height: 36px;
						display: flex;
						p {
							border: 1px solid rgb(242, 242, 242);
							min-width: 100px;
							height: 36px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 15px;
							color: #333;
							font-size: 15px;
							margin-right: 6px;
							
							cursor: pointer;
							b {
								display: none;
								font-weight: 700;
							}
							&.active {
								color: rgb(255, 236, 112);
								font-weight: 700;
								background-color: rgb(74, 74, 74);
							}
							&:hover {
								b {
									display: block;
								}
								span {
									display: none;
								}
							}
						}
					}
				}
			}

			h3.title {
				height: 30px;
				line-height: 30px;
				position: relative;
				font-size: 16px;
				color: #333;
				font-weight: 700;
				margin-bottom: 25px;

				&:after {
					position: absolute;
					height: 100%;
					width: 5px;
					position: absolute;
					left: -35px;
					top: 0px;
					background-color: rgba(74, 74, 74, 1);
					content: "";
				}
			}
			.title2 {
				width: 112px;
				padding: 2px 2px 2px 24px;
				font-size: 15px;
				color: #333;
				display: flex;
				height: 36px;
				align-items: center;
				margin: 0px !important;
				margin-bottom: 10px !important;
				font-weight: 700;
			}
			.list {
				margin-bottom: 20px;

				.list-div {
					display: flex;
					flex-wrap: wrap;

					div {
						width: 33.3%;
						display: flex;
						height: 36px;
						align-items: center;

						p {
							width: 112px;
							padding: 2px 2px 2px 24px;
							background-color: rgba(249, 249, 249, 1);
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							margin: 0px !important;
						}

						span {
							width: calc(100% - 112px);
							padding: 2px 2px 2px 24px;
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							
							&.b {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
</style>
